import { Table } from "antd";
import { useEffect, useState } from "react";

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

const App = () => {
  const [dataSource, setDataSource] = useState<any[]>([]);
  // 表格列定义-表头
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
    },
  ];
  useEffect(
    () => {
      (async () => {
        //模拟后端请求数据延时
        await sleep(2000);
        setDataSource([
          { key: "1", name: "John Brown", age: 32 },
          { key: "2", name: "Jim Green", age: 42 },
          { key: "3", name: "Joe Black", age: 32 },
        ]);
      })();
    },
    //如果[]里面的数据没有变化则 useEffect 只执行一次，如果[]有内容且内容变化则执行多次
    []
  );
  return (
    <div>
      <Table columns={columns} dataSource={dataSource} />
    </div>
  );
};

export default App;
